<template>
  <div class="anchorLink">
    <Anchor :targetOffset="80">
      <AnchorLink :href="item.key" v-for="(item,index) in links" :key="index" :title="item.title" />
    </Anchor>
  </div>
</template>

<script lang="ts" >
import { defineComponent, toRefs} from "vue";
import { Anchor } from "ant-design-vue";
import { detailProps } from '/@/components/anchorComponent';
export default defineComponent({
  name: 'anchorLink2',
  components: {
    Anchor,
    AnchorLink:Anchor.Link
  },
  props: detailProps,
  setup(props) {
    const { links } = toRefs(props);
    return {
      links
    };
  }
})
</script>

<style lang="less" scoped>

::v-deep(.ant-anchor-wrapper) {
  .ant-anchor-ink{
    &::before{
      display: none;
    }
  }

  .ant-anchor-ink-ball.visible {
    display: none;
  }

  .ant-anchor{
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0;
    border-bottom: 1px solid #EDEFF2;
  }

  .ant-anchor-link{
    display: inline-block;
    padding: 7px 16px;
    margin-right: 20px;
    border: 1px solid #EAEAEA;

    &.ant-anchor-link-active{
      background: #F2F8FD;
      border: 1px solid #1890ff;
    }
  }
}

</style>

